<%@page contentType="text/html; charset=utf-8"%>
<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- link rel="shortcut icon" href="favicon.png" -->
  
    <title>Dyna Page Management</title>
  
  
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css" rel="stylesheet">
    
    <style>
      body { padding-top:50px; }
      .editor textarea { height:800px; font-family: Fixedsys, Courier, Microsoft YaHei, Meiryo, MingLiU, monospace, San Serif; font-size:xx-small;}
      .preview iframe { height:800px;}
    </style>
  </head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="javascript:void(0)">Dyna Page Management</a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="editor col-md-6">
          <label class="col-md-2">Source</label>
          <label class="col-md-10" id="message">&nbsp;</label>
          <label class="col-md-2">Name</label>
          <input class="col-md-6" id="name" type="text" name="name" value="demo"/>
          <input class="col-md-2" id="loadBtn" type="button" value="Load"/>
          <input class="col-md-2" id="saveBtn" type="button" value="Save"/>
          <textarea class="col-md-12 col-xs-12 editor" id="pageSource" name="pageSource"></textarea>
        </div>
        <div class="preview col-md-6">
          <label class="col-md-2">Display</label>
          <label class="col-md-10">&nbsp;</label>
          <label class="col-md-2">Params</label>
          <input class="col-md-4" id="params" type="text" value="action=demo"/>
          <input class="col-md-2" id="showGetBtn" type="button" value="Get"/>
          <input class="col-md-2" id="showPostBtn" type="button" value="Post"/>
          <div class="col-md-2"><input id="newWindow" type="checkbox"/>New</div>
          
          <form id="dispForm" target="subscreen" method="POST">
            <input id="h0" type="hidden"/>
            <input id="h1" type="hidden"/>
            <input id="h2" type="hidden"/>
            <input id="h3" type="hidden"/>
            <input id="h4" type="hidden"/>
            <input id="h5" type="hidden"/>
          </form>
          <iframe class="col-md-12 col-xs-12" id="subscreen" name="subscreen">
          </iframe>
        </div>
      </div>
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function() {
        function showMessage(msg) {
          $("#message").text(msg);
          setTimeout(function(){
            if ($("#message").text() == msg) {
              $("#message").html("&nbsp;");
            }
          }, 2000);
        }
        
        $("#name").blur(function() {
          if (!$("#name").val().match("^[._a-zA-Z0-9\\-]+$")) {
            alert("Invalid name. Only alphabet and digit filename is allowed.");
            return false;
          }
          return true;
        });
        
        $("#loadBtn").click(function() {
          $.get("./_manage", {
              action:"load",
              name:$("#name").val()}, 
            function(resp, status, xhr) {
              $("#pageSource").val(resp);
              showMessage("loaded");
              if (localStorage) localStorage.dynaName = $("#name").val();
            });
        });
        
        $("#saveBtn").click(function() {
          $.post("./_manage", {
              action:"save", 
              name:$("#name").val(), 
              pageSource:$("#pageSource").val()},
            function(resp, status, xhr) {
              showMessage("saved");
              if (localStorage) localStorage.dynaName = $("#name").val();
            });
        });

        $("#showGetBtn").click(function() {
          $("#dispForm").attr("target", $("#newWindow").prop("checked") ? "_blank" : "subscreen");
          $("#dispForm").attr("action", $("#name").val() + "?" + $("#params").val());
          $("#dispForm").submit();
          if (localStorage) localStorage.dynaParams = $("#params").val();
        });
        $("#showPostBtn").click(function() {
          // set post params
          var params = $("#params").val().split("&");
          if (params.length > 5) {
            showMessage("Too many params. Only 5 params are supported by post.");
            return;
          }
          var i;
          for (i = 0; i < 5 && i < params.length; i ++) {
            if (params[i].indexOf("=") != -1) {
              var pair = params[i].split("=");
              var h = $("#h"+i);
              h.attr("name", pair[0]);
              h.val(pair[1]);
            }
          }
          
          // submit
          $("#dispForm").attr("target", $("#newWindow").prop("checked") ? "_blank" : "subscreen");
          $("#dispForm").attr("action",$("#name").val());
          $("#dispForm").submit();
          if (localStorage) localStorage.dynaParams = $("#params").val();
          
          // clear
          for (var i = 0; i < 5 && i < params.length; i ++) {
            if (params[i].indexOf("=") != -1) {
              var pair = params[i].split("=");
              var h = $("#h"+i);
              h.attr("name", "");
              h.val("");
            }
          }
        });
        
        function initData() {
          var pageSource = '<html>\n<body>\n<'+'%="Hello World!"%'+'>\n</body>\n</html>';
          $("#pageSource").val(pageSource);
        
          if (localStorage) {
            if (localStorage.dynaName) {
              $("#name").val(localStorage.dynaName);
              $("#loadBtn").click();
            }
            if (localStorage.dynaParams) $("#params").val(localStorage.dynaParams);
          }
        }
        
        initData();
      });
    </script>
</body>
</html>